<template>
  <div>
    <a-form-model-item label="检查日期">
      <a-date-picker
        :disabled-date="disabledDate"
        @change="onChange"
        style="width: 200px"
        v-model="laboratory.ogttPeptideDate"
      />
    </a-form-model-item>

    <div class="center">
      <table>
        <tr>
          <th>检查项目</th>
          <th>空腹(服糖前)</th>
          <th>30min</th>
          <th>1h</th>
          <th>2h</th>
          <th>3h</th>
          <th>单位</th>
        </tr>
        <tr>
          <td>血糖</td>
          <td>
            <a-input-number :min="0" v-model="laboratory.sugarLimosis" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.sugar30min" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.sugar1h" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.sugar2h" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.sugar3h" />
          </td>
          <td>mmol/L</td>
        </tr>
        <tr>
          <td>胰岛素</td>
          <td>
            <a-input-number :min="0" v-model="laboratory.isletLimosis" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.islet30min" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.islet1h" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.islet2h" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.islet3h" />
          </td>
          <td>mIU/L</td>
        </tr>
        <tr>
          <td>C肽</td>
          <td>
            <a-input-number :min="0" v-model="laboratory.peptideLimosis" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.peptide30min" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.peptide1h" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.peptide2h" />
          </td>
          <td>
            <a-input-number :min="0" v-model="laboratory.peptide3h" />
          </td>
          <td>nmol/L</td>
        </tr>
      </table>
    </div>

    <!-- <a-divider orientation="left" :style="{ marginTop: '40px' }">上传实验室检测报告单</a-divider>

    <a-form-model-item label="报告名称">
      <a-input v-model="laboratory.ogttReportName" :max-length="20" :style="{ width: '300px' }" />
    </a-form-model-item>

    <a-form-model-item label="报告结论">
      <a-textarea
        :maxLength="500"
        v-model="laboratory.ogttReportConclusion"
        placeholder=""
        :auto-size="{ minRows: 7, maxRows: 10 }"
        :style="{ width: '300px' }"
      />
      <div
        v-if="laboratory.ogttReportConclusion != null && laboratory.ogttReportConclusion.length > 0"
        :style="{ display: 'inline-block', marginLeft: '1rem' }"
      >
        {{ laboratory.ogttReportConclusion.length }}/500
      </div>
    </a-form-model-item>

    <a-form-model-item v-bind="tailFormItemLayout">
      <j-image-upload
        text="上传"
        v-model="laboratory.ogttReportPhoto"
        :is-multiple="true"
        :style="{ marginTop: '1.5rem' }"
        :preview="true"
        :img-arr="
          Array.isArray(laboratory.ogttReportPhoto)
            ? laboratory.ogttReportPhoto
            : laboratory.ogttReportPhoto
            ? laboratory.ogttReportPhoto.split(',')
            : []
        "
      ></j-image-upload>
    </a-form-model-item> -->

    <a-form-model-item :wrapper-col="{ span: 12, offset: 10 }">
      <a-button type="primary" @click="onSave" :loading="saveLoading">保存</a-button>
      <a-popconfirm placement="topLeft" ok-text="是" cancel-text="否" @confirm="doConfirm">
        <template slot="title">
          <p>{{ text }}</p>
        </template>
        <a-button type="primary" style="margin-left: 30px" :loading="confirmLoading">确认完成</a-button>
      </a-popconfirm>
      <a-button type="primary" style="margin-left: 30px" @click="endServiceOk" :loading="saveLoading"
        >服务后数据录入完成</a-button
      >
    </a-form-model-item>
  </div>
</template>

<script>
import moment from 'moment'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import bus from '@/utils/bus'

export default {
  name: 'OgttLslets',
  props: ['laboratory'],
  data() {
    return {
      loading: true,
      saveLoading: false,
      confirmLoading: false,
      text: '此操作代表你已完成了页面的填写，是否继续？',
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 12,
            offset: 2
          }
        }
      }
    }
  },
  methods: {
    onChange(date, dateString) {
      this.laboratory.ogttPeptideDate = this.laboratory.ogttPeptideDate.format('YYYY-MM-DD hh:mm:ss')
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current > moment().endOf('day')
    },
    onSave() {
      const params = this.laboratory
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let queryData = {
        islet1h: params.islet1h,
        islet2h: params.islet2h,
        islet30min: params.islet30min,
        islet3h: params.islet3h,
        isletLimosis: params.isletLimosis,
        ogttIsFinished: params.ogttIsFinished,
        ogttPeptideDate: params.ogttPeptideDate,
        ogttReportConclusion: params.ogttReportConclusion,
        ogttReportName: params.ogttReportName,
        ogttReportPhoto: params.ogttReportPhoto,
        peptide1h: params.peptide1h,
        peptide2h: params.peptide2h,
        peptide30min: params.peptide30min,
        peptide3h: params.peptide3h,
        peptideLimosis: params.peptideLimosis,
        sugar1h: params.sugar1h,
        sugar2h: params.sugar2h,
        sugar30min: params.sugar30min,
        sugar3h: params.sugar3h,
        sugarLimosis: params.sugarLimosis
      }
      const data = Object.values(queryData).filter(v => v)
      if (data.length == 0) return
      queryData.dataId = params.dataId
      queryData.patientId = patientId
      this.loading = true
      this.saveLoading = true
      postAction('dossier/laboratory/ogtt/update', queryData)
        .then(res => {
          if (res.success) {
            this.$message.success('操作成功')
            this.$emit('next', '3')
          } else {
            this.$message.error('操作失败')
          }
        })
        .finally(_ => {
          this.saveLoading = false
          this.loading = false
        })
    },
    doConfirm() {
      this.confirmLoading = true

      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]

      let params = {
        patientId: patientId,
        isFinished: 1,
        type: 2
      }
      postAction('102/10/1021303', params)
        .then(res => {
          if (res.success) {
            this.$message.success('页面已确认', 5)
            this.$emit('next', '3')
          }
        })
        .finally(_ => {
          this.confirmLoading = false
        })
    },
    endServiceOk() {
      this.onSave()
      bus.$emit('modifiedDataForFinalReportByLab', {
        type: '实验室检测',
        data: this.laboratory
      })
      // this.$router.back(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.center {
  display: flex;
  justify-content: center;
  text-align: center;
  table {
    border: 1px solid #e8e8e7;
  }
  table th {
    border: 1px solid #e8e8e7;
    width: 300px;
    padding: 1rem;
    color: black;
    background-color: #fafafa;
  }
  table td {
    border: 1px solid #e8e8e7;
    padding: 1rem;
    font-size: 14px;
    font-weight: 355;
    color: rgba(0, 0, 0, 0.65);
  }
}
</style>

